<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>4, v-on修饰符</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <style>
        .one{
            width: 300px;
            height: 300px;
            background: red;
        }

        .two{
            width: 200px;
            height: 200px;
            background: rgb(43, 172, 75);
        }

        .three{
            width: 100px;
            height: 100px;
            background: rgb(71, 69, 211);
        }
        .three a{
            color: #fff;
        }


    </style>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">

            <div class="one" v-on:click="one">
                <div class="two"  v-on:click.stop="two">
                    <div class="three"  v-on:click="three">
                        <a href="https://www.baidu.com" v-on:click.prevent.stop.once="demo3">百度</a>
                    </div>
                </div>
            </div>

            <hr>

            <a href="https://www.baidu.com" v-on:click.prevent="demo">百度</a>

            <button @click.once="demo1">点击</button>
            <button v-on:click.left="demo4"> 左键</button>
            <button v-on:click.right="demo5"> 右键</button>
            <button v-on:click.middle="demo6"> 中间滚轮</button>

            <hr>

            <input  @keyup.enter="demo7" placeholder="回车键触发"  type="text">

        </div>

       


    </body>

    <script>
        new Vue({
            el:"#app",
            methods:{
                one(){
                    console.log(111111111111111)
                },
                two(){
                    console.log(222222222222)
                },
                three(){
                    console.log(333333333)
                },
                demo(){    
                    alert(111111111111);                  
                },
                demo1(){
                    alert(2222222222);
                },
                demo3(){
                    alert(333333333333333);
                },
                demo4(){
                    alert("左边")
                },
                demo5(){
                    alert("右边")
                },
                demo6(){
                    alert("中间滚轮")
                },
                demo7(e){
                    
                    console.log("右有输入了");
                  
                    
                }
            }
        })
    </script>
</html>